<template>
  <Fragment>
    <div class="head-wrap borderBottom-1px">
      <div class="title left borderBottom-2px">{{title}}</div>
      <div class="operate right">                  
      </div>
    </div>
    <div class="content-wrap">
      <div class="chart-content" ref="genderRatioStatistics">
        2019
      </div>                         
    </div>
    <img src="@/assets/images/card819.png" class="card819" alt="">
  </Fragment>
</template>

<script>
import * as echarts from 'echarts';
import 'echarts-liquidfill'
import { Fragment } from 'vue-fragment'
export default {
  name:'box-card-single-analysis1-huanzhenianling',
  components:{Fragment},
  props:{
    title:{
      type:String
    }
  },
  mounted(){
    this.makeData()
  },
  methods:{
    makeData(){
      let value3 = 0.45
      var data3 = [value3, value3];
      var option3 = {
          title: [
            
              {
                  text: (value3 * 100).toFixed(0) + '%',
                  left: '25%',
                  top: '48%',
                  textAlign: 'center',
                  textStyle: {
                      fontSize: '30',
                      fontWeight: '300',
                      color: '#a06a0a',
                      textAlign: 'center',
                      textBorderColor: 'rgba(0, 0, 0, 0)',
                      textShadowColor: '#fff',
                      textShadowBlur: '0',
                      textShadowOffsetX: 0,
                      textShadowOffsetY: 1,
                  },
              },
              {
                  text: (value3 * 100).toFixed(0) + '%',
                  left: '75%',
                  top: '48%',
                  textAlign: 'center',
                  textStyle: {
                      fontSize: '30',
                      fontWeight: '300',
                      color: '#02456d',
                      textAlign: 'center',
                      textBorderColor: 'rgba(0, 0, 0, 0)',
                      textShadowColor: '#fff',
                      textShadowBlur: '0',
                      textShadowOffsetX: 0,
                      textShadowOffsetY: 1,
                  },
              },
          ],
          series: [
              {
                  type: 'liquidFill',
                  radius: '55%',
                  z: 6,
                  center: ['25%', '50%'],
                  color: ['#3467D8', '#4E36F3'],
                  data: data3,
                  backgroundStyle: {
                      borderWidth: 1,
                      color: 'transparent',
                      borderColor: '#1F265D',
                  },
                  label: {
                      normal: {
                          formatter: '',
                      },
                  },
                  outline: {
                      show: true,
                      itemStyle: {
                          borderWidth: 0,
                      },
                      borderDistance: 0,
                  },
              },
              {
                  name: '第二层白边',
                  type: 'pie',
                  z: 3,
                  radius: ['0%', '57%'],
                  center: ['25%', '50%'],
                  hoverAnimation: false,
                  itemStyle: {
                      normal: {
                          label: {
                              show: false,
                          },
                      },
                  },
                  data: [
                      {
                          value: 100,
                          itemStyle: {
                              normal: {
                                  color: 'transparent'
                              },
                          },
                      },
                      {
                          value: 0,
                          itemStyle: {
                              normal: {
                                  color: 'transparent',
                              },
                          },
                      },
                  ],
              },
              {
                  name: '最外绿边',
                  type: 'pie',
                  z: 1,
                  radius: ['0%', '58%'],
                  center: ['25%', '50%'],
                  hoverAnimation: false,
                  itemStyle: {
                      normal: {
                          label: {
                              show: false,
                          },
                      },
                  },
                  data: [
                      {
                          value: 100,
                          itemStyle: {
                              color: 'transparent',
                          },
                      },
                      {
                          value: 0,
                          itemStyle: {
                              normal: {
                                  color: 'transparent',
                              },
                          },
                      },
                  ],
              },
              {
                  type: 'liquidFill',
                  radius: '55%',
                  z: 6,
                  center: ['75%', '50%'],
                  color: ['#F36C7A', '#D862B2'],
                  data: [0.6, { value: 0.5, direction: 'left' }],
                  backgroundStyle: {
                      borderWidth: 1,
                      color: 'transparent',
                      borderColor: '#1F265D',
                  },
                  label: {
                      normal: {
                          formatter: '',
                      },
                  },
                  outline: {
                      show: true,
                      itemStyle: {
                          borderWidth: 0,
                      },
                      borderDistance: 0,
                  },
              },
              {
                  name: '第二层白边',
                  type: 'pie',
                  z: 3,
                  radius: ['0%', '57%'],
                  center: ['75%', '50%'],
                  hoverAnimation: false,
                  itemStyle: {
                      normal: {
                          label: {
                              show: false,
                          },
                      },
                  },
                  data: [
                      {
                          value: 100,
                          itemStyle: {
                              normal: {
                                  color: 'transparent'
                              },
                          },
                      },
                      {
                          value: 0,
                          itemStyle: {
                              normal: {
                                  color: 'transparent',
                              },
                          },
                      },
                  ],
              },
              {
                  name: '最外蓝边',
                  type: 'pie',
                  z: 1,
                  radius: ['0%', '58%'],
                  center: ['75%', '50%'],
                  hoverAnimation: false,
                  itemStyle: {
                      normal: {
                          label: {
                              show: false,
                          },
                      },
                  },
                  data: [
                      {
                          value: 100,
                          itemStyle: {
                              color: 'transparent',
                          },
                      },
                      {
                          value: 0,
                          itemStyle: {
                              normal: {
                                  color: 'transparent',
                              },
                          },
                      },
                  ],
              },
          ],
      }
      this.makeGraph(this.$refs.genderRatioStatistics,option3)

    },
    makeGraph(ref,option){
      let myChart=echarts.init(ref)
      myChart.setOption(option)
    }
  }
}
</script>
<style lang="less" scoped>
.left{float: left;}
.right{float: right;}
.borderBottom-1px{
  border-bottom: .01rem solid #7787C7 ;
}
.borderBottom-2px{
  border-bottom: .02rem solid #7787C7 ;
}
.head-wrap{
    font-size: .16rem;
    color:#ffffff;
    overflow: hidden;
    .title{
      height: .26rem;
      line-height: .262rem;
    }
    .operate{
      span{
        height: .26rem;
        line-height: .26rem;
        display: inline-block;
        cursor: pointer;
        background: url('~@/assets/images/671.png') no-repeat center center;
        background-size: contain;
        padding: 1px .2rem;
      }
      span.active{
        background: url('~@/assets/images/670.png') no-repeat center center;
        background-size: contain;
        padding: 1px .2rem;
      }
    }
  }
  .content-wrap{
    width: 100%;
    height:calc( (100vh - 1.23rem) / 3 - .36rem) ;
    .chart-content{
      width: 100%;
      height:calc( (100vh - 1.23rem) / 3 - .36rem) ;
      float: left;
      overflow: hidden;
    }
  }
  img{width: 100%;float: left;}
</style>